<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=no">
		<title>安全泰达</title>
		<link rel="stylesheet" href="./css/common.css" />
		<link rel="stylesheet" href="./layui/css/layui.css" />
		<link rel="stylesheet" href="./css/mainPage.css" />
		<script src="./script/vue.js"></script>
		<script src="./script/axios.js"></script>
	</head>
	<body>
		<div class="ET_header" id="ET_header">
		    <div class="title">
		        事项清单
		    </div>
		</div>
		<div class="ET_container" id="app">
			<div class="matter_list">
				<div class="list_title">
					事项清单
				</div>
				<div class="list_detail">
					<div class="list_main" v-for="(item,index) in res_GetEmergencyMatterMaster" :key="item.pm_code">
						<div class="item_head" @click="getItem(item,index)">
							<div class="item_name">
								{{item.pm_name}}
							</div>
							<div class="right_arrow showItem" @click="getItem(item,index)">
								<img src="image/right_arrow.png" alt="" />
							</div>
							<div class="down_arrow" @click="closeItem(item,index)">
								<img src="image/down_arrow.png" alt="" />
							</div>
						</div>
						<ul class="some_item">
							<li @click="checkItemInfo(item1,index1)" v-for="(item1,index1) in item.children" :key="item1.pm_code">
								<div class="item_label">
									{{item1.pm_name}}
								</div>
								<div class="item_type">
									<span>部门：{{item1.department_name}}</span>
									<span>办件量：{{item1.handle_number}}件</span>
								</div>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<script src="./script/jquery.min.js"></script>
		<script src="./script/api.js"></script>
		<script>
			new Vue({
				el: '#app',
				data() {
					return {
						res_GetEmergencyMatterMaster:[]
					}
				},
				created() {
					this.getData()
				},
				mounted() {

				},
				methods: {
					async getData(){
						const searchData = {keyword:"",department_codes:["yjglj"],business_systems:["policy_implementation"]}
						const res_GetEmergencyMatterMaster = await axios.post(
            			  "/matter/Matter/GetMatterTree?pageIndex=1&pageSize=10",
            			  searchData,
            			  { headers: { Authorization: 'Basic cGM6cGM=' } }
            			)
						console.log('getData',res_GetEmergencyMatterMaster)
						$('.list_detail').empty()
						if(res_GetEmergencyMatterMaster.data.code == 200){
							this.res_GetEmergencyMatterMaster = res_GetEmergencyMatterMaster.data.data
							this.$nextTick(()=>{
								this.getItem(this.res_GetEmergencyMatterMaster[0],0)
							})
						}						
					},
					// 打开二级标题
					getItem(obj,index){
						//let id = $(obj).attr('data-id');
						
						if($('.list_main').eq(index).find('.right_arrow').hasClass('showItem')){
							$('.list_main').eq(index).find('.right_arrow').removeClass('showItem')
							$('.list_main').eq(index).find('.down_arrow').addClass('showItem')
							$('.list_main').eq(index).find(".some_item").show()
						}else{
							$('.list_main').eq(index).find('.right_arrow').addClass('showItem')
							$('.list_main').eq(index).find('.down_arrow').removeClass('showItem')
							$('.list_main').eq(index).find(".some_item").hide()
						}
					},
					// 关闭二级标题
					closeItem(obj,index){
						
						console.log(index)
						$('.list_main').eq(index).find('.right_arrow').addClass('showItem')
						$('.list_main').eq(index).find('.down_arrow').removeClass('showItem')
						$('.list_main').eq(index).find(".some_item").hide()
					},
					// 二级标题跳转至
					checkItemInfo(obj,index){
						console.log(obj,index);
						window.location.href='./zcdxDetail.html?value='+obj.id
					}
				},
			})	
		</script>
	</body>
</html>